<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wzc">
        <h2>v-for遍历数组</h2>
        <ul>
            <li v-for="(p, index) in persons" :key="index">
                {{index}}---{{p.name}}---{{p.age}}---<button @click='del(index)'>删除</button> ---<button @click="up(index,{name:'fff',age:20})">更新</button>
            </li>
        </ul>
        <h2>v-for遍历对象</h2>
        <ul>
            <li v-for="(value,key) in persons[2]" ::key="key">
                {{key}}----{{value}}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        // vue本身只是监听了persons的改变，没有监听数组内部的变化
        // vue重写了数组中一系列改变数组内部的方法，（先调用原生，在更新界面）
        new Vue({
            el: "#wzc",
            data: {
                persons: [{ //vue只是监视了persons的改变，没有监视数组内部的数据的改变
                    name: 'wzc',
                    age: 18
                }, {
                    name: 'aaa',
                    age: 16
                }, {
                    name: 'bbb',
                    age: 19
                }, {
                    name: 'ccc',
                    age: 10
                }]
            },
            methods: {
                del(index) {
                    this.persons.splice(index, 1);
                },
                up(index, c) {
                    console.log(c);
                    console.log(this.persons[index])
                        // this.persons[index] = c; //没有改变persons本身，
                    this.persons.splice(index, 1, c);
                }
            },
        })
    </script>
</body>

</html>